<template>
  <article class="page">
    <headerbar>我要出题</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="inner-content pdv-9 pdh-4">

        <div class="input-row-wrap">
          <div class="name">题目类型：</div>
          <div class="value-wrap">
          </div>
        </div>
        <div class="input-column-wrap">
          <div class="value-wrap">
            <cube-radio-group :horizontal="true" :options="options" v-model="selected" />
          </div>
        </div>


        <div class="input-row-wrap">
          <div class="name"><i class="required color-red">*</i>学习内容：</div>
          <textarea placeholder="请填写学习内容（注意：内容需有“资料来源”，示例：“资料来源：XXX”）" v-model="content" name="" cols="20" rows="10"></textarea>
        </div>

        <!--图片-->
        <section>
          <div class="color-tip mgb-1"><i class="required color-red">严禁上传或录入涉密内容</i></div>
          <div class="name">图片</div>
          <cube-upload ref="upload"
                       action=""
                       v-model="files"
                       accept="image/*"
                       :simultaneous-uploads="1"
                       @files-added="uploadFile"
                       @file-removed="fileRemoved"
                       @input="onInput"
                       :max="1"/>
        </section>

        <div class="input-row-wrap">
          <div class="name"><i class="required color-red">*</i>题目：</div>
          <textarea placeholder="请填写问题题目"  v-model="title" name="" cols="20" rows="3"></textarea>
        </div>

        <div class="input-row-wrap">
          <div class="name"><i class="required color-red">*</i>备选项：</div>
          <div></div>
        </div>

        <div v-if="tabIndex === 0">
          <div class="answer-wrap">
            <div class="check-wrap">
              A、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="radioValue0"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="radioChooseValue" v-model="radioValue[0]" :option="{value: '0'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              B、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="radioValue1"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="radioChooseValue" v-model="radioValue[1]" :option="{value: '1'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              C、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="radioValue2"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="radioChooseValue" v-model="radioValue[2]" :option="{value: '2'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              D、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="radioValue3"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="radioChooseValue" v-model="radioValue[3]" :option="{value: '3'}">正确答案</cube-checkbox>
            </div>
          </div>
        </div>

        <div v-if="tabIndex === 1">
          <div class="answer-wrap">
            <div class="check-wrap">
              A、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="checkboxValue0"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="checkboxChooseValue" v-model="checkboxValue[0]" :option="{value: '0'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              B、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="checkboxValue1"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="checkboxChooseValue" v-model="checkboxValue[1]" :option="{value: 'l'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              C、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="checkboxValue2"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="checkboxChooseValue" v-model="checkboxValue[2]" :option="{value: '2'}">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              D、
            </div>
            <div class="input-wrap">
              <Textarea placeholder="请输入内容" v-model="checkboxValue3"></Textarea>
            </div>
            <div class="check-wrap">
              <cube-checkbox @input="checkboxChooseValue" v-model="checkboxValue[3]" :option="{value: '3'}">正确答案</cube-checkbox>
            </div>
          </div>
        </div>

        <div v-if="tabIndex === 2">
          <div class="answer-wrap">
            <div class="check-wrap">
              A、
            </div>
            <div class="input-wrap">
              <!--<Textarea placeholder="请输入内容" readonly v-model="judgeValue0"></Textarea>-->
              <input v-model="judgeValue0" type="text" readonly>
            </div>
            <div class="check-wrap">
              <cube-checkbox readonly @input="judgeChooseValue" v-model="judgeValue[0]" :option="{value: '0'}" cols="20" rows="1">正确答案</cube-checkbox>
            </div>
          </div>

          <div class="answer-wrap">
            <div class="check-wrap">
              B、
            </div>
            <div class="input-wrap">
             <!-- <Textarea placeholder="请输入内容" readonly v-model="judgeValue1"></Textarea>-->
              <input v-model="judgeValue1" type="text" readonly>
            </div>
            <div class="check-wrap">
              <cube-checkbox readonly @input="judgeChooseValue" v-model="judgeValue[1]" :option="{value: '1'}" cols="20" rows="1">正确答案</cube-checkbox>
            </div>
          </div>
        </div>

        <div class="answer-wrap" v-if="tabIndex === 3">
          <div class="input-wrap">
            <Textarea placeholder="请输入内容"></Textarea>
          </div>
        </div>

        <div class="pdv-3"></div>

        <div class="default-block-btn" v-preventReClick="1000" @click="saveUserExam($event)">提交</div>

        <div class="pdv-3"></div>

      </section>
    </section>
  </article>
</template>

<script>
  import {Textarea} from 'cube-ui'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  import fileIcon from '../../../../static/images/up_document.png'
  export default {
    components: {Textarea},
    name: 'problemSetting',
    data () {
      return {
        selected: '单选',
        checkboxValue: [],
        radioValue: [],
        judgeValue: [],
        options: ['单选', '多选', '判断'],
        radioOptions: ['正常答案'],
        tabIndex: 0,
        radioValue0: '',
        radioValue1: '',
        radioValue2: '',
        radioValue3: '',
        checkboxValue0: '',
        checkboxValue1: '',
        checkboxValue2: '',
        checkboxValue3: '',
        judgeValue0: '正确',
        judgeValue1: '错误',
        title: '',
        content: '',
        userInfo: {},
        files: [],
        attachmentList: []
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      this.findHints()
    },
    methods: {
      chooseValue (value) {
        console.log("----------------value=", value)
        if (value === '单选') {
          this.tabIndex = 0
        } else if (value === '多选') {
          this.tabIndex = 1
        } else if (value === '判断') {
          this.tabIndex = 2
        } else if (value === '填空') {
          this.tabIndex = 3
        }
      },
      radioChooseValue (value) {
        console.log("----------------value=", value)
        this.radioValue.map((v, index) => {
          this.radioValue[index] = false
          if (parseInt(value) === index) {
            this.radioValue[index] = true
          }
        })
      },
      checkboxChooseValue (value) {
        this.checkboxValue.map((v, index) => {
          console.log("----------------v=", v)
          console.log("----------------index=", index)
        })
      },
      judgeChooseValue (value) {
        this.judgeValue.map((v, index) => {
          this.judgeValue[index] = false
          if (parseInt(value) === index) {
            this.judgeValue[index] = true
          }
        })
      },
      saveUserExam (e) {
        if (e.target.disabled) {
          return false
        }
        if (this.title === '') {
          return tools.tip('请填写问题题目！')
        }
        if (this.content === '') {
          return tools.tip('请填写学习内容！')
        }
        let addItems = []
        if (this.tabIndex === 0) {
          if (this.radioValue0 === '' || this.radioValue1 === '' || this.radioValue2 === '' || this.radioValue3 === '') {
            return tools.tip('请输入内容！')
          }
          if (this.radioValue.length <= 0) {
            return tools.tip('请选择正确答案！')
          }

          let rightIndex = -1
          this.radioValue.map((v, index) => {
              if (v) {
                rightIndex = index
              }
          })

          if (rightIndex === -1) {
            return tools.tip('请选择正确答案！')
          }
          let item1 = {}
          item1.title = this.radioValue0
          item1.index = '1'
          item1.right = '0'
          if (rightIndex === 0) {
            item1.right = '1'
          }
          let item2 = {}
          item2.title = this.radioValue1
          item2.index = '2'
          item2.right = '0'
          if (rightIndex === 1) {
            item2.right = '1'
          }
          let item3 = {}
          item3.title = this.radioValue2
          item3.index = '3'
          item3.right = '0'
          if (rightIndex === 2) {
            item3.right = '1'
          }
          let item4 = {}
          item4.title = this.radioValue3
          item4.index = '4'
          item4.right = '0'
          if (rightIndex === 3) {
            item4.right = '1'
          }

          addItems.push(item1)
          addItems.push(item2)
          addItems.push(item3)
          addItems.push(item4)
        }
        if (this.tabIndex === 1) {
          if (this.checkboxValue0 === '' || this.checkboxValue1 === '' || this.checkboxValue2 === '' || this.checkboxValue3 === '') {
            return tools.tip('请输入内容！')
          }
          if (this.checkboxValue.length <= 1) {
            return tools.tip('您出的是多选题，至少应有2个正确选项！')
          }

          // let isSelect = 0
          // for (let i = 0; i < 4; i++) {
          //   if (this.checkboxValue[i]) {
          //     isSelect++
          //     break
          //   }
          // }
          // if (isSelect < 2) {
          //   return tools.tip('您出的是多选题，至少应有2个正确选项！')
          // }

          let item1 = {}
          item1.title = this.checkboxValue0
          item1.index = '1'
          item1.right = '0'
          if (this.checkboxValue[0]) {
            item1.right = '1'
          }
          let item2 = {}
          item2.title = this.checkboxValue1
          item2.index = '2'
          item2.right = '0'
          if (this.checkboxValue[1]) {
            item2.right = '1'
          }
          let item3 = {}
          item3.title = this.checkboxValue2
          item3.index = '3'
          item3.right = '0'
          if (this.checkboxValue[2]) {
            item3.right = '1'
          }
          let item4 = {}
          item4.title = this.checkboxValue3
          item4.index = '4'
          item4.right = '0'
          if (this.checkboxValue[3]) {
            item4.right = '1'
          }

          addItems.push(item1)
          addItems.push(item2)
          addItems.push(item3)
          addItems.push(item4)
        }
        if (this.tabIndex === 2) {
          if (this.judgeValue0 === '' || this.judgeValue1 === '') {
            return tools.tip('请输入内容！')
          }
          if (this.judgeValue.length <= 0) {
            return tools.tip('请选择正确答案！')
          }

          let rightIndex = -1
          this.judgeValue.map((v, index) => {
            if (v) {
              rightIndex = index
            }
          })

          if (rightIndex === -1) {
            return tools.tip('请选择正确答案！')
          }
          let item1 = {}
          item1.title = this.judgeValue0
          item1.index = '1'
          item1.right = '0'
          if (rightIndex === 0) {
            item1.right = '1'
          }
          let item2 = {}
          item2.title = this.judgeValue1
          item2.index = '2'
          item2.right = '0'
          if (rightIndex === 1) {
            item2.right = '1'
          }

          addItems.push(item1)
          addItems.push(item2)
        }

        let addItemsStr = JSON.stringify(addItems)
        let data = {
          // loginId: this.userInfo.id,
          loginId: '112029',
          title: this.title,
          topicType: this.tabIndex+1,
          learnTxt: this.content,
          // addItems: "[{\"title\":\"第一个答案\",\"right\":\"1\",\"index\":\"1\"},{\"title\":\"第二个答案\",\"right\":\"1\",\"index\":\"1\"},{\"title\":\"第三个答案\",\"right\":\"0\",\"index\":\"3\"},{\"title\":\"第四个答案\",\"right\":\"0\",\"index\":\"4\"}]"
          addItems: addItemsStr
        }
        if (this.attachmentList.length > 0) {
          data.fileId = this.attachmentList[0].fileid
        }
        console.log("----------data=", data)
        loginService.saveUserExam(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          tools.tip('提交成功，感谢参与！')
          setTimeout(() => {
            tools.back()
          }, 2000)
        })
      },
      findHints () {
        let data = {
          type: '2'
        }
        loginService.findHints(data).then((res) => {
          if (res.code === 0) {
            this.tipData = res.data
            tools.alert(res.data.hint)
          }
        })
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.attachmentList.push({
            'fileid': res.data.fileId,
            'filename': uploadFile.name,
            'totalBytes': res.data.totalBytes,
            'type': '1'
          })
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      }
    },
    watch: {
      selected (newName, oldName) {
        this.chooseValue(newName)
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
